<template>
	<view class="center">
		<ul class="attention">
			<li>
				<image class="avatar" src="/static/img/wx.png"></image>
				<view class="agent-name">微信服务号</view>
				<view class="attention-status">13:34</view>
			
			</li>
			
			<li>
				<image class="avatar" src="/static/img/wx.png"></image>
				<view class="agent-name">微信服务号</view>
				<view class="attention-status">13:34</view>
			
			</li>
			
			<li>
				<image class="avatar" src="/static/img/wx.png"></image>
				<view class="agent-name">微信服务号</view>
				<view class="attention-status">13:34</view>
			
			</li>
			
		</ul>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
    .center {
		display: flex;
		flex-direction: column;
		align-items: center;
	
	}
	
	
	.attention{
		width:100%;
		height: auto;
		list-style-type: none;
		margin:0;
		padding:0;
	}
	
	
	.attention li{
		width:100%;
		height: 128rpx;
		position:relative;
		
	}
	
	.attention li .avatar{
		width:80rpx;
		height: 80rpx;
		position:absolute;
		left:32rpx;
		top:24rpx;
	}
	
	.attention li .agent-name{
		width:auto;
		height: 30rpx;
		font-size:34rpx;
		color:#373737;
		position:absolute;
		left:144rpx;
		top:50rpx;
		
	}
	
	.attention li .attention-status{
		position:absolute;
		right:28rpx;
		top:34rpx;
		width:124rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #F6F6F6;
		border-radius: 40rpx;
		font-size:24rpx;
		color:#9B9B9B;
		text-align: center;
	}
	
</style>
